<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/c/font_4095325_6gr70rqrdtn.css?spm=a313x.7781069.1998910419.52&file=font_4095325_6gr70rqrdtn.css">
    <style>
        .box {
            width: 1200px;
            margin: 30px auto;
        }

        .num {
            font-size: 20px;
            font-weight: 400;
        }

        .nav {
            width: 100%;
            display: flex;
            font-size: 14px;
            font-weight: bolder;
            border-bottom: 2px solid #f1f1f1;
            margin-top: 10px;
        }

        .tab {
            margin-right: 20px;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
        }

        .active {
            color: #00a1d6;
            border-bottom: 2px solid #00a1d6;
        }

        .send {
            display: flex;
            padding: 20px 0;
            border-bottom: 2px solid #f1f1f1;
        }

        .logo {
            flex: 1;
        }

        .logo img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .content {
            flex: 13;
            display: flex;
            justify-content: space-between;
        }

        .content:hover textarea {
            background-color: #fff;
            border: 1px solid #00a1d6;
        }

        .context-text {
            width: 92%;
        }

        textarea {
            width: 100%;
            height: 60px;
            resize: none;
            border-radius: 5px;
            background-color: #f1f1f1;
            border: 1px solid #f1f1f1;
            outline: none;
        }

        .context-btn {
            width: 6%;
            height: 60px;
            text-align: center;
            font-size: 13px;
            color: #fff;
            background-color: #247b98;
            border-radius: 5px;
            cursor: pointer;
            padding: 15px 0;
            box-sizing: border-box;
        }

        .context-btn:hover {
            background-color: #00a1d6;
        }

        p {
            margin: 0;
        }

        .a {
            flex: 13;
        }

        .a>div {
            /* font-size: 13px; */
            margin: 10px;
        }

        .author {
            font-size: 12px;
            font-weight: bold;
            color: #b4b4b4;
        }

        .comment {
            font-size: 16px;
        }

        .time {
            font-size: 12px;
            color: #919191;
        }

        .icon-caiyixia1 {
            font-size: 13px;
        }

        .iconfont {
            cursor: pointer;
        }

        .remove {
            font-size: 12px;
            cursor: pointer;
            font-size: #4b4b4b;
            padding: 5px 8px;
            box-sizing: border-box;
        }

        .remove:hover {
            background-color: #f1f1f1;
            border-radius: 2px;
        }

        .on {
            color: #00a1d6;
        }

        .a i {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<!-- 生成不重复的id -->
<script src="https://cdn.bootcdn.net/ajax/libs/uuid/7.0.0/uuid.min.js"></script>
<script type="text/babel">
    // console.log(u.generate())
    // 根组件
    class App extends React.Component {
        constructor(props){
            super(props)
            this.remove = this.remove.bind(this)
        }
        state = {
            list: [
                {
                    id: 1,
                    author: '刘德华',
                    comment: '给我一杯忘情水',
                    time: new Date('2021-10-10 09:09:00'),
                    // 1: 点赞 0：无态度 -1:踩
                    attitude: 1
                },
                {
                    id: 2,
                    author: '周杰伦',
                    comment: '哎哟，不错哦',
                    time: new Date('2021-10-11 09:09:00'),
                    // 1: 点赞 0：无态度 -1:踩
                    attitude: 0
                },
                {
                    id: 3,
                    author: '五月天',
                    comment: '不打扰，是我的温柔',
                    time: new Date('2021-10-11 10:09:00'),
                    // 1: 点赞 0：无态度 -1:踩
                    attitude: -1
                }
            ],
            // 排序状态
            type: "hot"
        }
        render() {
            let { list, type } = this.state;
            return (
                <div className='box'>
                    <div className='num'>{list.length}评论</div>
                    <Nav getType={(type) => {
                        // 更新排序状态
                        this.setState({
                            type
                        })
                    }} />
                    <Send getMsg={(msg)=>{
                        // 接受父组件传递过来值并将其放到数组中
                        list.push(msg);
                        this.setState({
                            list
                        })
                    }}/>
                    {
                        type === 'time' && list.sort((a, b) => b.time - a.time).map(item => {
                            return <Item key={item.id} item={item} getId={this.getId} remove={this.remove}/>
                        })
                    }
                    {
                        type==='hot' && list.sort((a, b) => b.attitude - a.attitude).map(item => {
                            return <Item key={item.id} item={item} getId={this.getId} remove={this.remove}/>
                        })
                    }
                </div>
            )
        }
        getId=(id,type)=>{
            let {list} = this.state;
            // 根据id找到当前列表中要改变的数据对象
            let index = list.findIndex((item)=>{
                return item.id===id;
            })
            if(index===-1){
                return
            }
            let msg = list[index];
            if(type===0){
                //点赞
                if(msg.attitude===1){
                    msg.attitude =0
                }else{
                    msg.attitude = 1
                }
                this.setState({
                    list
                })
                return
            }
            if(msg.attitude===-1){
                    msg.attitude =0
                }else{
                    msg.attitude = -1
                }
                this.setState({
                    list
                })
        }
        // 删除
        remove(id){
            let {list} = this.state;
            // 根据id找到当前列表中要改变的数据对象
            let index = list.findIndex((item)=>{
                return item.id===id;
            })
            if(index===-1){
                return
            }
            list.splice(index,1);
            this.setState({
                list
            })
        }
    }
    //tab组件
    class Nav extends React.Component {
        state = {
            // hot: 热度排序  time: 时间排序
            tabs: [
                {
                    id: 1,
                    name: '热度',
                    type: 'hot'
                },
                {
                    id: 2,
                    name: '时间',
                    type: 'time'
                }
            ],
            type: "hot"
        }
        render() {
            let { tabs, type } = this.state;
            return (
                <div className='nav'>
                    {
                        tabs.map(item => {
                            return <div className={type === item.type ? 'tab active' : 'tab'} key={item.id} onClick={() => this.changeType(item.type)}>按{item.name}排序</div>
                        })
                    }
                </div>
            )
        }
        changeType(type) {
            this.setState({
                type: type
            })
            this.props.getType(type)
        }
    }
    // 发表评论组件
    class Send extends React.Component {
        state={
            content:"",
            autroList:["肖战",'小蔡','李易峰','吴亦凡','黄世豪']
        }
        render() {
            let {content} = this.state;
            return (
                <div className='send'>
                    <div className='logo'>
                        <img src="./avatar.png" alt="" />
                    </div>
                    <div className='content'>
                        <div className='context-text'>
                            <textarea value={content} onChange={(e)=>{
                                this.setState({content:e.target.value})
                            }}></textarea>
                        </div>
                        <div className='context-btn' onClick={()=>this.send()}>
                            <p>发表</p>
                            <p>评论</p>
                        </div>
                    </div>
                </div>
            )
        }
        // 发表评论
        send(){
            let {content,autroList} = this.state;
            // 生成唯一id
            let id = uuid.v1();
            // 生成随机正整数用来获取随机评论人
            let index = Math.floor(Math.random()*autroList.length)
            console.log(index)
            let author = autroList[index];
            let time = new Date();
            let attitude = 0;
            let msg = {
                id,
                author,
                comment:content,
                attitude,
                time
            }
            // 将msg传递给父组件
            this.props.getMsg(msg)
            this.setState({
                content:""
            })
        }   
    }
    //每个评论列表组件
    class Item extends React.Component {
        render() {
            console.log(this.props)
            let { author, comment, attitude, time,id } = this.props.item;
            return (
                <div className='send'>
                    <div className='logo'>
                        <img src="./avatar.png" alt="" />
                    </div>
                    <div className='a'>
                        <div className='author'>{author}</div>
                        <div className='comment'>{comment}</div>
                        <div className='time'> {this.getTime(time)} <i className={attitude === 1 ? 'iconfont icon-dianzan on' : 'iconfont icon-dianzan'} onClick={()=>this.Star(id,0)}></i>
                            <i className={attitude === -1 ? 'iconfont icon-caiyixia1 on' : 'iconfont icon-caiyixia1'} onClick={()=>this.Star(id,1)}></i>   <span className='remove' onClick={()=>{this.props.remove(id)}}>删除</span>
                        </div>
                    </div>
                </div>
            )
        }
        getTime(time) {
            console.log(time)
            return time.toLocaleDateString() + " " + time.toLocaleTimeString();
        }
        //点赞
        Star(id,type){
            console.log(id)
            // 将当前要点赞的id传递给父组件
            this.props.getId(id,type)
        }
    }
    ReactDOM.render(<App />, document.getElementById("root"))

    // let arry = [0,2,34,56,7,834];
    // let newArry = arry.sort((a,b)=>{
    //     return b-a
    // })
    // console.log(newArry)
</script>

</html>